import React, { Component } from 'react'
import "./Tabbar.scss"

export default class Tabbar extends Component {
    state = {
        activeTab: "home",
        activePath:{
            home:"/home",
            category:"/category",
            cart:"/cart",
            my:"/my"
        }
    }
    //点击某个导航，改变当前激活的项，跳到相应的页面
    handleClick = (activeTab) => {
        this.setState({
            activeTab: activeTab
        });
        // console.log(this.state.activePath[activeTab]);
        this.props.history.push(this.state.activePath[activeTab])
    }
    handleHashChange = () => {
        let path = this.props.match.path.split("/")[1];
        this.setState({
            activeTab:path
        })
    }
    
    //页面刷新时实现url的路径和导航激活一致
    componentDidMount(){
        // console.log(2);
        // console.log(this.props.match.path.split("/")[1]);
        let path = this.props.match.path.split("/")[1];
        this.setState({
            activeTab:path
        });
        //监听hash值的变化
        window.addEventListener("hashchange",this.handleHashChange);
    }
    //
    componentWillUnmount(){
        window.removeEventListener("hashchange",this.handleHashChange);
    }
    render() {
        return (
            <div className="Container">
                {/* 内容区开始 */}
                <div className="Content">
                    {this.props.children}
                </div>
                {/* 内容区结束 */}
                {/* 底部导航开始 */}
                <div className="tabbar">
                    <div className="tabbarItem" onClick={this.handleClick.bind(this, "home")}>
                        <i className={this.state.activeTab === "home" ? "icon icon-home-o" : "icon icon-home"}></i>
                        <span className={this.state.activeTab === "home" ? "title active" : "title"}>首页</span>
                    </div>
                    <div className="tabbarItem" onClick={this.handleClick.bind(this, "category")}>
                        <i className={this.state.activeTab === "category" ? "icon icon-community-o" : "icon icon-community"}></i>
                        <span className={this.state.activeTab === "category" ? "title active" : "title"}>分类</span>
                    </div>
                    <div className="tabbarItem" onClick={this.handleClick.bind(this, "cart")}>
                        <i className={this.state.activeTab === "cart" ? "icon icon-cart-o" : "icon icon-cart"}></i>
                        <span className={this.state.activeTab === "cart" ? "title active " : "title"}>购物车</span>
                    </div>
                    <div className="tabbarItem" onClick={this.handleClick.bind(this, "my")}>
                        <i className={this.state.activeTab === "my" ? "icon icon-my-o" : "icon icon-my"}></i>
                        <span className={this.state.activeTab === "my" ? "title active" : "title"}>我的</span>
                    </div>
                </div>
                {/* 底部导航结束 */}
            </div>
        )
    }
}
